import React from "react";
import './Header.css'

export default class Header extends React.Component{
    // 状态
    state={
        toparr:[
            {title:'首页',checked:true},
            {title:'HTML',checked:false},
            {title:'CSS',checked:false},
            {title:'JAVASCRIPT',checked:false},
            {title:'REACT',checked:false}
        ],
        index:0     //控制导航下标样式选中
    }

    //修改 导航栏样式
    updataChecked=function(i){
        return ()=>{

            //输出 下标
            // console.log(i);
            //获取state数据重新赋值
            let newtoparr=this.state.toparr;
    
            // 一    循环遍历数组,全部改为 false
            // for(let n=0;n<newtoparr.length;n++){
            //     newtoparr[n].checked=false;
            // }
    
             // 二.  修改上一次导航样式选中
             newtoparr[this.state.index].checked = false;
    
            //修改当前点击行数据的cheched
            newtoparr[i].checked=true;
    
            //修改 数据的状态
            this.setState({
                toparr:newtoparr,   //设置 toparr新数据
                index:i // 设置下标数据
            })
        }
    }

    render(){
        return <div className='header'>
            <ul>
                {
                    this.state.toparr.map((item,index)=>{
                        return <li key={index} className={item.checked?'active':null} onClick={this.updataChecked(index)}>{item.title}</li>
                    })
                }
            </ul>
        </div>
    }
}